<template>
	<div class="my-tab">
		<vs-tabs :value="value" :color="colorx" alignment="center" position="left">
			<vs-tab v-for="(item, key) in this.tabs" :key="key"
							:label="item.label" :icon="item.icon"
							@click="colorx=item.accent">
				<div>
					<!--Tab子页面-->
					<my-s-divider :title="item.label" hint="全部"/>
					<vs-row vs-justify="space-between">
						<vs-col :key="index" v-for="(item, index) in tabGoods"
										vs-type="flex" vs-justify="space-between"
										vs-align="center" vs-w="4">
							<div class="my-category-item-img">
								<img class="my-bg-img" :src="item.img" :alt="item.name">
							</div>
							<div class="my-category-item-name">
								{{item.name}}
							</div>
						</vs-col>
					</vs-row>
					<!--猜你喜欢-->
					<my-s-divider title="猜你喜欢" hint="更多"/>
					<vs-row vs-justify="space-between">
						<vs-col :key="index" v-for="(item, index) in guessLikes"
										vs-type="flex" vs-justify="space-between"
										vs-align="center" vs-w="4">
							<div class="my-category-item-img">
								<img class="my-bg-img" :src="item.img" :alt="item.name">
							</div>
							<div class="my-category-item-name">
								{{ item.name }}
							</div>
						</vs-col>
					</vs-row>
				</div>
			</vs-tab>
		</vs-tabs>
	</div>
</template>

<script>
import MySDivider from "@/pages/components/public/MySDivider";

export default {
	name: "MyTab",
	components: {MySDivider},
	props: {
		position: {
			type: String, default: () => {
				return 'left'
			}
		},
		tabs: Array,
		value: Number
	},
	data() {
		return {
			colorx: '#49A28C',
			tabGoods: [
				{img: "https://forum.alexs.fun/categories/sofa.png", name: '二人沙发'},
				{img: "https://forum.alexs.fun/categories/bed.png", name: '床'},
				{img: "https://forum.alexs.fun/categories/zwg.png", name: '置物柜'},
				{img: "https://forum.alexs.fun/categories/table.png", name: '桌子'},
				{img: "https://forum.alexs.fun/categories/lamp.png", name: '台灯'},
				{img: "https://forum.alexs.fun/categories/cups.png", name: '杯具'}
			],
			guessLikes: [
				{img: "https://forum.alexs.fun/categories/firm.png", name: '工作柜'},
				{img: "https://forum.alexs.fun/categories/chair.png", name: '艺术椅'},
				{img: "https://forum.alexs.fun/categories/zwg2.png", name: '置物柜'},
				{img: "https://forum.alexs.fun/categories/mealt.png", name: '餐桌'},
				{img: "https://forum.alexs.fun/categories/zd.png", name: '坐墩'},
				{img: "https://forum.alexs.fun/categories/carpet.png", name: '盖毯'},
				{img: "https://forum.alexs.fun/categories/gjy.png", name: '高阶椅'},
				{img: "https://forum.alexs.fun/categories/lspt.png", name: '地灯架'},
				{img: "https://forum.alexs.fun/categories/osg.png", name: '欧式柜'}
			]
		}
	},
	methods: {},
	created() {},
	watch:{
		value:function () {
		}
	}
}
</script>

<style scoped>
	.vs-tabs {
		width: max-content;
	}
	.my-tab {
		width: 100%;
		/*height: 100%;*/
	}
	.con-vs-tabs {
		justify-content: space-between;
		width: 100%;
	}
	.vs-col {
		height: 84px;
		text-align: center;
		color: white;
		display: flex;
		flex-direction: column;
		overflow: hidden;
	}
	.my-category-item-img {
		flex: 5;
		width: 60px;
		border-radius: 30px;
		margin: 0 auto;
		overflow: hidden;
	}
	.my-category-item-name {
		flex: 2;
		color: black;
	}
	.my-bg-img {
		height: 100%;
		width: 100%;
	}
</style>